{include "INC_header.html" title="图集管理"}
<div id="app-outlet" class="app-outlet">
    <!-- ant-design 应用需要配置 -->
    <a-config-provider :locale="config.locale" :theme="config.theme">
        <!-- 搜索、筛选 -->
        <div class="app-container">
            <header class="auto-height padding-left padding-top padding-right">
                <!-- 筛选 -->
                <div class="border radius light-background">
                    <div class="ui flex-item padding border-bottom hover-background">
                        <div class="start">
                            <a-input-search
                                    v-model:value="keyword"
                                    placeholder="图集名称"
                                    enter-button="搜索"
                                    @search="setKeyword"
                            />
                        </div>
                        <div class="start" v-if="listQueryParams.keyword != ''">
                            <a-button type="danger" @click="setKeyword('')">
                                <template #icon><i class="fa fa-close margin-right-half"></i></template>
                                清除搜索
                            </a-button>
                        </div>
                        <div class="center"></div>
                        <div class="end">
                            <a-button type="primary" @click="editItem(null)">
                                <template #icon><i class="fa fa-plus margin-right"></i></template>
                                添加图集
                            </a-button>
                        </div>
                    </div>
                    <div class="ui form padding-top">
                        <div class="border-bottom light-border ui flex-item padding-half" v-if="filterSites.length > 0">
                            <div class="start justify-center padding-start-half" style="height: 32px;">站点</div>
                            <div class="center">
                                <div class="ant-checkbox-list">
                                    <a-checkbox v-model:checked="site.checked" v-for="site in filterSites" :value="site.id" @change="changeSiteId">{{ site.name }}</a-checkbox>
                                </div>
                            </div>
                            <div class="end justify-center padding-end-half" style="height: 32px;">
                                <a href="{url url='/cms/admin/site/list'}">管理</a>
                            </div>
                        </div>
                        <div class="fields padding">
                            <div class="field">
                                <label class="label text-small">状态</label>
                                <div class="">
                                    <a-radio-group v-model:value="listQueryParams.state" size="small" button-style="solid" @change="getList">
                                        <a-radio-button value="all">全部</a-radio-button>
                                        <a-radio-button :value="1">显示</a-radio-button>
                                        <a-radio-button :value="0">隐藏</a-radio-button>
                                    </a-radio-group>
                                </div>
                            </div>
                            <div class="field">
                                <label class="label text-small">每页数量</label>
                                <div class="">
                                    <a-radio-group v-model:value="listQueryParams.total" size="small" button-style="solid" @change="getList">
                                        <a-radio-button :value="30">30</a-radio-button>
                                        <a-radio-button :value="50">50</a-radio-button>
                                        <a-radio-button :value="100">100</a-radio-button>
                                        <a-radio-button :value="200">200</a-radio-button>
                                    </a-radio-group>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </header>
            <main class="flex-column overflow-hidden">
                <div class="padding-half" style="flex: 1; overflow: auto;" v-if="list.rows > 0">
                    <!-- 列表 -->
                    <div class="cms-focus-pictures">
                        <div class="item" v-for="item in list.list" style="background: var(--light-background);">
                            <div class="swiper">
                                <a-carousel :after-change="onChange" :autoplay="true">
                                    <div class="swiper-item" v-for="pic in item.pictures">
                                        <a :href="pic.url" target="_blank"><img :src="pic.picture"></a>
                                        <div class="swiper-desc">{{ pic.desc }}</div>
                                    </div>
                                </a-carousel>
                            </div>
                            <div class="padding-top padding-bottom">{{ item.name }}</div>
                            <div class="ui row flex">
                                <div class="col padding-right-half">
                                    <div class="ui button block danger small" @click="deleteItem(item.id)">删除</div>
                                </div>
                                <div class="col padding-left-half">
                                    <div class="ui button block small" @click="editItem(item)">修改</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="empty-content margin" v-else>
                    <a-empty :image="simpleImage" description="未添加图集">
                        <div class="padding-top"></div>
                        <a-button type="primary" @click="editItem(null)">
                            <template #icon><i class="fa fa-plus margin-right"></i></template>
                            添加图集
                        </a-button>
                    </a-empty>
                </div>
            </main>
            <footer v-if="list.pages > 1" class="background padding">
                {include "INC_page.html"}
            </footer>
        </div>
    </a-config-provider>
</div>
<script>
    //vue app
    const { createApp, defineComponent, ref } = Vue;
    const { message, Empty, Modal } = antd;
    const app = createApp({
        data() {
            return {
                //主题配置
                config: appProviderConfig,
                //空图片
                simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
                //数据
                list: {
                    rows: 0,
                    page: 1,
                    pages: 0,
                    list: []
                },
                //列表参数
                keyword: '',
                listQueryParams: {
                    keyword: '',
                    state: 'all',
                    page: 1,
                    total: 30,
                    admin: 1,
                    siteId: '',
                    tag: ''
                },
                //站点列表
                sites: [],
                filterSites: []
            }
        },
        mounted() {
            //挂载成功
            this.initData();
        },
        methods: {
            //方法
            initData: function () {
                //获取站点数据，用于筛选
                let self = this;
                const hide = message.loading("正在加载站点数据");
                axios.get("{url url='/cms/api/site/list'}", {
                    params: { admin:1, total: 500 }
                }).then(({ data }) => {
                    hide();
                    if (data.error === 0) {
                        self.sites = data.data.list;
                        let filterSites = [];
                        self.sites.map(site => {
                            site.checked = false;
                            filterSites.push(site);
                        });
                        self.filterSites = filterSites;
                    } else {
                        message.error(data.message);
                    }
                }).catch(() => {
                    hide();
                    message.error("加载数据失败");
                });
                //获取列表数据
                this.getList();
            },
            //获取列表
            getList : function (){
                let self = this;
                const hide = message.loading("正在加载数据");
                axios.get("{url url='/cms/api/focus/list'}", {
                    params: this.listQueryParams
                }).then(({ data }) => {
                    hide();
                    if (data.error === 0) {
                        self.list = data.data;
                    } else {
                        message.error(data.message);
                    }
                }).catch(() => {
                    hide();
                    message.error("加载数据失败");
                });
            },
            //首页
            firstPage : function (){
                let page = parseInt(this.list.page);
                if(page > 1){
                    this.listQueryParams.page = 1;
                    this.getList();
                }
            },
            //上一页
            prevPage : function (){
                let page = parseInt(this.list.page);
                if(page > 1){
                    this.listQueryParams.page = page - 1;
                    this.getList();
                }
            },
            //下一页
            nextPage : function (){
                let page = parseInt(this.list.page);
                let pages = parseInt(this.list.pages);
                if(page < pages){
                    this.listQueryParams.page = page + 1
                    this.getList();
                }
            },
            //最后一页
            lastPage : function (){
                let page = parseInt(this.list.page);
                let pages = parseInt(this.list.pages);
                if(page < pages){
                    this.listQueryParams.page = pages;
                    this.getList();
                }
            },
            //设置跳到第几页
            setPage : function (page){
                page = isNaN(page) ? -1 : parseInt(page);
                page = page > 0 ? page : -1;
                if(page === -1){
                    message.error('参数错误');
                }else if(page !== this.list.page){
                    this.listQueryParams.page = page;
                    this.getList();
                }
            },
            //设置参数，重载列表
            setListQueryParam : function (params){
                //通过替换key值的方式
                for(let key in params){
                    this.listQueryParams[key] = params[key];
                }
                this.getList();
            },
            //搜索
            setKeyword: function (value){
                if(this.listQueryParams.keyword != value){
                    this.listQueryParams.keyword = value;
                    this.getList();
                }
                if (value == '') {
                    this.keyword = '';
                }
            },
            //清除搜索
            cleanKeyword: function (){
                this.keyword = '';
                this.listQueryParams.keyword = '';
                this.getList();
            },
            changeSiteId: function (_event) {
                const { checked, value } = _event.target;
                let values = this.listQueryParams.siteId;
                values = values === "" || values == null ? [] : values.split(",");
                if (checked) {
                    values.push(value.toString());
                } else {
                    if (values.indexOf(value.toString()) !== -1) {
                        //移除
                        values.splice(values.indexOf(value.toString()), 1);
                    }
                }
                this.setListQueryParam({ siteId: values.join(",") })
            },
            editItem(item) {
                item = item || { id: 0 }
                window.location.href = "{url url='/cms/admin/focus/edit'}?id=" + item.id;
            },
            //删除站点
            deleteItem(id) {
                let self = this;
                Modal.confirm({
                    title: '确定要删除该图集吗?',
                    content: '图集删除后不可恢复，请谨慎操作！',
                    okText: '立即删除',
                    okType: 'danger',
                    cancelText: '取消',
                    onOk() {
                        return new Promise((resolve, reject) => {
                            axios.post("{url url='/cms/api/focus/delete'}", { id }).then(({ data }) => {
                                resolve();
                                if (data.error === 0) {
                                    self.getList();
                                    message.success(data.message);
                                } else {
                                    message.error(data.message);
                                }
                            }).catch(() => {
                                reject();
                            })
                        }).catch(() => console.log('Oops errors!'));
                    },
                    onCancel() {},
                });
            },
            itemSwitch(index) {
                let id = this.list.list[index].id;
                let self = this;
                axios.post("{url url='/cms/api/focus/switch'}", { id }).then(({ data }) => {
                    if (data.error === 0) {
                        self.list.list[index].state = self.list.list[index].state == 1 ? 0 : 1;
                    } else {
                        message.error(data.message);
                    }
                }).catch(() => {
                    message.error("服务端繁忙");
                });
            }
        }
    }).use(antd);
    //挂载
    const vm = app.mount("#app-outlet");
    //
    if (window.parent) {
        window.parent.postMessage({
            event: "location",
            data: [
                { name:"图集管理" }
            ]
        });
    }
</script>
{include "INC_footer.html"}